<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
    }
    .bg{
      height: 100%;
      width: 100%;
      background-image: url('./onlineBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-top: 50px;
      box-sizing: border-box;
    }
    .aa{
      border-radius: 50%;
      width: 300px;
      height: 300px;
      background: #0484a1;
      margin: 0 auto;
      position: relative;
    }
    .powerText{
      position: absolute;
      color: #fff;
    }
    .one{
      left: 50%;
      transform:translate(-50%, -100%);
      top: 0;
    }
    .two{
      left: 90%;
      transform:translate(-50%, -100%);
      top: 20%;
    }
    .three{
      left: 90%;
      transform:translate(-50%, -100%);
      top: 80%;
    }
    .four{
      left: 50%;
      transform:translate(-50%, -100%);
      top: 100%;
    }
    .five{
      left: 10%;
      transform:translate(-50%, -100%);
      top: 80%;
    }
    .six{
      left: 10%;
      transform:translate(-50%, -100%);
      top: 20%;
    }
  </style>
</head>
<body>
  <div class="bg">
    <div class="aa">
      <canvas id="myCanvas" width="300" height="300"></canvas>
      <span class="powerText one">历史</span>
      <span class="powerText two">娱乐</span>
      <span class="powerText three">剧情</span>
      <span class="powerText four">主创</span>
      <span class="powerText five">技术</span>
      <span class="powerText six">数据</span>
    </div>
  </div>
</body>
<script src="./echarts.min.js"></script>
<script>
// 历史 娱乐 剧情 主创 技术 数据
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var circleColor = '#fff'     // 圆的线的颜色


var mData = [77,72,46,50,60,80]
var canvasWidth = document.getElementById("myCanvas").offsetWidth // canvas 宽度
var canvasR= canvasWidth/2      // 半径
var mCount = 6                  // 多少条直线。也就是多少能力
var mAngle = Math.PI * 2 / mCount    // 角度


// var mCount = 6; //边数
// var mCenter = canvasWidth /2; //中心点
// var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
// var mAngle = Math.PI * 2 / mCount; //角度

// 画圆
function drawCircle(ctx){
  ctx.save();
  ctx.strokeStyle = circleColor;
  for (let i = 0 ; i < 5 ; i++) {
    let r = i * 10
    if (i < 2) {
      r = 10
    } else if (i === 2) {
      r = 40
    } else if (i === 3) {
      r = 60
    } else if (i === 4) {
      r = 90
    }
    ctx.beginPath();
    ctx.arc(canvasR, canvasR, canvasR - r, 0, 2 * Math.PI);
    ctx.stroke();
  }
}
// 画线
function drawLine (ctx) {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = '#fff';
  for(var i = 0; i < mCount; i ++){
      var x = canvasR + canvasR * Math.cos(mAngle * i + Math.PI/2);
      var y = canvasR + canvasR * Math.sin(mAngle * i + Math.PI/2);

      ctx.moveTo(canvasR, canvasR);
      ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.restore();
}
// 雷达图面积
function drawRegion(ctx){
    ctx.save();

    ctx.beginPath();
    for(var i = 0; i < mCount; i ++){
        var x = canvasR + canvasR * Math.cos(mAngle * i) * mData[i] / 100;
        var y = canvasR + canvasR * Math.sin(mAngle * i) * mData[i] / 100;
        ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(70, 85, 170, 0.85)';
    ctx.fill();

    ctx.restore();
}
drawCircle(ctx)
drawLine(ctx)
drawRegion(ctx)
</script>
</html>